<template>
    <div class="comment">
        <van-nav-bar title="发表评论" left-text="返回" left-arrow @click-left="goBack" />
        <van-field
            v-model="comment.commentContent"
            rows="5"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入评论"
            show-word-limit
        />
        <div style="display: flex; justify-content: flex-end; margin: 10px 10px 0 0;">
            <van-button type="primary" @click="submitComment" size="small">提交</van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { donatorApi } from '../../api/app';
import { showFailToast, showSuccessToast, showToast } from 'vant';

const router = useRouter();
const comment = ref({
    commentId: '',
    commentContent: '',
    commentTime: '',
    donatorId: '',
    fundraisingProjectsId: '',
    donationRecordsId: ''
});

onMounted(() => {
    const route = useRoute();
    comment.value.donationRecordsId = route.params.donationRecordsId as string;
    comment.value.fundraisingProjectsId = route.params.fundraisingProjectsId as string;
})

/** 返回个人主页 */
const goBack = () => {
    router.back();
}

/** 提交评论 */
const submitComment = () => {
    comment.value.commentTime = new Date().toLocaleString();
    const { donatorId } = JSON.parse(localStorage.getItem('donator') || '');
    comment.value.donatorId = donatorId;
    donatorApi.addComment(comment.value).then(res => {
        if (res) {
            showSuccessToast('评论成功');
            router.back();
        } else {
            showFailToast('评论失败');
        }
    });
}
</script>

<style scoped lang="less">
.comment {
    width: 100vw;
    height: 100vh;
    background-color: rgba(237, 231, 231, 0.422);
}
</style>